<template>
	<view>
		<cu-custom :bgLiner="true" :isBlack="false">
			<block slot="content">发票管理</block>
		</cu-custom>
		<view class="top-head" :style="{top:CustomBar+'px'}">
			<view class="sorts-item" v-for="(item,index) in sorts" :key="index" :class="{'sorts-act':current == item.id}" @click="changeCurrent(item)">
				{{item.name}}
			</view>
		</view>
		<view style="height: 102rpx;"></view>
		<view class="contents" v-show="current==1">
			<view class="voucher-item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<view class="flex justify-space-between align-center">
					<view class="f-16 fontBold orange">
						{{item.name}}
					</view>
					<view class="f-12 white bg-orange p-l-10 p-r-10 b-r-5 p-t-2 p-b-2" v-if="!item.invoice_status">
						申请开票
					</view>
					<view class="f-16 fontBold yellow" v-else>
						{{item.invoice_status==1?'待开票':item.invoice_status==2?'已开票':'未申请'}}
					</view>
				</view>
				<view v-show="!item.showAll">
					<view class=" flex m-t-10" v-for="(item2,index2) in item.goods.slice(0,2)" :key="item2.id">
						<view class="flex align-center">
							<image :src="item2.thumb_url" class="imgs" mode=""></image>
						</view>
						<view class="flex-1 p-l-10 flex flex-direction justify-space-between">
							<view class="f-17 fontBold">
								{{item2.goods_name}}
							</view>
							<view class="">
								<view class="flex justify-space-between m-b-3">
									<view class="f-12 black-9">
										<text v-if="item2.goods_attr_str">规格：{{item2.goods_attr_str}}</text>
									</view>
									<view class="f-12 yellow">
										*{{item2.goods_num}}
									</view>
								</view>
								<view class="flex justify-space-between">
									<view class="orange f-17 fontBold">
										￥{{item2.price}}
									</view>
									<view class="orange f-17 fontBold">
										￥{{item2.real_price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="item.showAll">
					<view class=" flex m-t-10" v-for="(item2,index2) in item.goods" :key="item2.id">
						<view class="flex align-center">
							<image :src="item2.thumb_url" class="imgs" mode=""></image>
						</view>
						<view class="flex-1 p-l-10 flex flex-direction justify-space-between">
							<view class="f-17 fontBold">
								{{item2.goods_name}}
							</view>
							<view class="">
								<view class="flex justify-space-between m-b-3">
									<view class="f-12 black-9">
										<text v-if="item2.goods_attr_str">规格：{{item2.goods_attr_str}}</text>
									</view>
									<view class="f-12 yellow">
										*{{item2.goods_num}}
									</view>
								</view>
								<view class="flex justify-space-between">
									<view class="orange f-17 fontBold">
										￥{{item2.price}}
									</view>
									<view class="orange f-17 fontBold">
										￥{{item2.real_price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-center p-t-5 p-b-5" @click.stop="changeShow(item)" v-if="item.goods&&item.goods.length > 2">
					<image src="/static/img/right.png" class="see-more" :class="{'see-more-trans':item.showAll}"></image>
				</view>
				<view class="m-t-10 flex align-center wrap-invoice" v-if="item.invoice_id">
					<view class="flex-1">
						<view class="fontBold">
							{{item.invoice_type==2?'专用发票':'普通发票'}}-{{item.type_content==2?'商品类别':'商品明细'}}-{{item.type_look_up==2?'单位':'个人'}}
						</view>
						<view class="f-12 m-t-5">
							{{item.look_up_name}}
						</view>
					</view>
					<view class="flex-none f-16 fontBold orange">
						￥{{item.total_price||0}}
					</view>
				</view>
			</view>
			<view class="nodata" v-if="list.length == 0">
				暂无数据~
			</view>
		</view>
		<view class="contents" v-show="current==2">
			<view class="voucher-item" v-for="(item,index) in invoiceList" :key="item.id">
				<view class="flex justify-space-between align-center">
					<view class="flex align-center">
						<view class="f-16 fontBold orange">
							{{item.type==2?'专用发票':'普通发票'}}抬头-{{item.type_look_up==2?'单位':'个人'}}
						</view>
						<view class="is_default_wrap" v-if="item.is_default==1">
							默认
						</view>
					</view>
					<view class="flex align-center p-l-20 p-t-3 p-b-3" @click="delCar(item)">
						<image src="/static/img/trash.png" class="icon" mode=""></image>
					</view>
				</view>
				<view class="flex justify-space-between align-center m-t-8">
					<view class="">
						<view class="f-16 fontBold">
							{{item.look_up_name}}
						</view>
						<view class="" v-if="item.unit_num">
							{{item.unit_num}}
						</view>
					</view>
					<view class="flex align-center p-l-20 p-t-3 p-b-3" @click="toInvoiceDetail(item)">
						<image src="/static/img/edit.png" class="icon" mode=""></image>
					</view>
				</view>
			</view>
			<view class="nodata" v-if="invoiceList.length == 0">
				暂无数据~
			</view>
		</view>
		<view style="height: 130rpx;" v-show="current==2"></view>
		<view class="bottom-wrap flex justify-space-around" v-show="current==2">
			<view class="bottom-btn bottom-btn2" @click="sub()">
				添加发票抬头
			</view>
		</view>
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="fontBold f-20 orange text-center m-b-15">
					选择发票抬头
				</view>
				<scroll-view scroll-y="true" style="min-height: 500rpx;">
					<view class="p-t-5 p-b-5">
						<view class="scale-1px-bottom p-t-5 p-b-5 flex align-center" v-for="(item,index) in invoiceListChoose" :key="item.id" @click="choosePeopleItem(item)">
							<view class="flex align-center p-r-10">
								<image :src="item.check?'/static/img/seled.png':'/static/img/sel.png'" class="sel" mode=""></image>
							</view>
							<view class="">
								<view class="f-16 fontBold orange">
									{{item.type==2?'专用发票':'普通发票'}}抬头-{{item.type_look_up==2?'单位':'个人'}}
								</view>
								<view class="">
									<view class="f-15 fontBold">
										{{item.look_up_name}}
									</view>
									<view class="f-13" v-if="item.unit_num">
										{{item.unit_num}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="nodata" v-if="invoiceListChoose.length == 0">
					暂无数据~
				</view>
				<view class="flex justify-center m-t-20">
					<view class=" btn btn2 m-r-10" @click="closePop()">
						取消
					</view>
					<view class=" btn" @click="surePeople">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sorts:[{id:1,name:'申请开票列表'},{id:2,name:'抬头管理'}],
				current:1,
				list:[],
				page:1,
				last_page:1,
				
				invoiceList:[],
				invoiceListChoose:[],//用来选择的
				invoItem:{},
			}
		},
		onLoad(option) {
			this.getList();
		},
		onReachBottom() {
			if(this.page >= this.last_page)return;
			this.page++;
			this.getList();
		},
		onShow() {
			if(this.current==2){
				this.getInfo();
			}
		},
		methods: {
			changeCurrent(item){
				if(item.id == this.current)return;
				this.current = item.id;
				if(this.current==1){
					this.page = 1;
					this.getList();
				}else{
					this.getInfo();
				}
			},
			applyInvoice(item){
				// uni.showModal({
				// 	title:'提示',
				// 	content:'确认申请开票吗？',
				// 	success: (res) => {
				// 		if(res.confirm){
				// 			this.applyInvoiceDo(item);
				// 		}
				// 	}
				// })
				this.getInvoiceList();
				this.invoItem = item;
				setTimeout(()=>{
					this.openPop();
				},150)
			},
			applyInvoiceDo(invoice_id){
				let data = {
					orders_id:this.invoItem.id,
					invoice_id
				}
				this.$http('/apicloud/Order/applyInvoice',data).then(res=>{
					if(res.code == 200){
						this.$util.showToast(res.mess);
						setTimeout(()=>{
							this.closePop();
							this.page = 1;
							this.getList();
						},1000)
					}else{
						this.$util.showToast(res.mess);
					}
				})
			},
			toDetail(item){
				if(item.invoice_status==0||!item.invoice_status){
					this.applyInvoice(item);
				}else if(item.invoice_status == 2){
					uni.navigateTo({
						url:'/pages/mine/invoiceDetail?id='+item.id
					})
				}
			},
			toInvoiceDetail(item){
				uni.navigateTo({
					url:'/pages/mine/addInvoice?id='+item.id
				})
			},
			sub(){
				uni.navigateTo({
					url:'/pages/mine/addInvoice'
				})
			},
			delCar(item){
				uni.showModal({
					title:'提示',
					content:'确认删除该发票抬头吗？',
					success: (res) => {
						if(res.confirm){
							this.delCarDo(item);
						}
					}
				})
			},
			delCarDo(item){
				let data = {
					invoice_id:item.id
				}
				this.$http('/apicloud/User/delUsersInvoice',data).then(res=>{
					if(res.code == 200){
						this.$util.showToast(res.mess);
						setTimeout(()=>{
							this.getInfo();
						},1000)
					}else{
						this.$util.showToast(res.mess);
					}
				})
			},
			getList(){
				let data = {
					page:this.page
				}
				this.$http('/apicloud/Order/applicationList',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						let list = datas.list.data;
						this.last_page = datas.list.last_page;
						list.forEach(item=>{
							this.$set(item,'showAll',false);
						})
						if(this.page == 1){
							
							this.list = list;
						}else{
							this.list = this.list.concat(list);
						}
						
					}
				})
			},
			getInfo(){
				let data = {
					
				}
				this.$http('/apicloud/User/usersInvoice',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.invoiceList = datas;
					}
				})
			},
			getInvoiceList(){
				let data = {
					
				}
				this.$http('/apicloud/User/usersInvoice',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.invoiceListChoose = datas;
						this.invoiceListChoose.forEach(item=>{
							this.$set(item,'check',false);
							if(item.is_default == 1){
								item.check = true;
							}
						})
					}
				})
			},
			changeShow(item) {
				item.showAll = !item.showAll;
			},
			openPop(){
				this.$refs.popup.open();
			},
			closePop(){
				this.$refs.popup.close();
			},
			choosePeopleItem(item){
				this.invoiceListChoose.forEach(items=>{
					items.check = items.id==item.id?!items.check:false;
				})
			},
			surePeople(){
				let invoice_id = 0;
				this.invoiceListChoose.forEach(item=>{
					if(item.check){
						invoice_id = item.id;
					}
				})
				if(invoice_id==0){
					this.$util.showToast('请选择发票抬头',1500);
					return;
				}
				this.applyInvoiceDo(invoice_id);
			},
		}
	}
</script>

<style lang="less">
	.top-head{
		position: fixed;
		background: #ff5200;
		padding: 20rpx 30rpx;
		z-index: 23;
		left: 0;
		width: 100%;
		height: 102rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 0 0 30rpx 30rpx;
		.sorts-item{
			color: #ffffff;
			width: 280rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
		}
		.sorts-act{
			background: #ffcb00;
			border-radius: 50rpx;
		}	
	}
	.voucher-item{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px rgba(0,0,0,0.05);
		border-radius: 16rpx;
		padding: 24rpx;
		.icon{
			width: 32rpx;
			height: 28rpx;
		}
	}
	.imgs{
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
	}
	.wrap-invoice{
		background: #FFE7DC;
		border-radius: 16rpx;
		padding: 20rpx;
	}
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
	
		.bottom-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
	
	
		.bottom-btn2 {
			background: #FF5200;
		}
	}
	.is_default_wrap{
		width: 100rpx;
		height: 40rpx;
		background: #FECB2E;
		color: #fff;
		border-radius: 30rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		line-height: 40rpx;
		text-align: center;
	}
	.see-more {
		width: 44rpx;
		height: 44rpx;
		transform: rotate(90deg);
		transition: .3s;
	}
	
	.see-more-trans {
		transform: rotate(-90deg);
		transition: .3s;
	}
	.popup_content {
		width: 90%;
		min-width: 660rpx;
		min-height: 600rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		position: relative;
		padding: 30rpx;
	
		.btn {
			background: #FF5200;
			color: #ffffff;
			border-radius: 60rpx;
			width: 40%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn2{
			background: #666666;
		}
	}
	.sel{
		width: 40rpx;
		height: 40rpx;
	}
</style>
